<!DOCTYPE html>
<html>
<head>
	<title>放大镜</title>
	<style type="text/css">
		.img-box {
			width: 400px;
			height: 400px;
			margin: 80px 0 0 150px;
			border: 1px solid #ccc;
			float: left;
			position: relative;
		}
		.img-box>img {
			width: 100%;
			height: 100%;
		}
		.mark {
			width: 200px;
			height: 200px;
			position: absolute;
			top: 0;
			display: none;
			background: yellow;
			opacity: 0.4;
		}
		.show-box {
			width: 400px;
			height: 400px;
			float: left;
			border: 1px solid #ccc;
			margin: 80px 0 0 150px;
			overflow: hidden;
			display: none;
		}
		.show-box>img {
			width: 200%;
			height: 200%;
		}
	</style>
</head>
<body>
<div>
	<div class="img-box">
		<img src="3.jpg" alt="">
		<div class="mark"></div>
	</div>
	<div class="show-box">
		<img src="3.jpg" alt="">
	</div>
</div>
</body>
<script type="text/javascript">
	
var imgBox = document.getElementsByClassName('img-box')[0];
var mark = document.getElementsByClassName('mark')[0];
var showBox = document.getElementsByClassName('show-box')[0];
var showImg = document.getElementsByTagName('img')[1];


imgBox.onmousemove = function(e) {
	e = e || window.event;
	var x = e.clientX - this.offsetLeft;
	var y = e.clientY - this.offsetTop;
	var mx = mark.offsetLeft;
	var my = mark.offsetTop;
	if (0 < x && 0 < y && x < this.offsetWidth && y < this.offsetHeight) {
		mark.style.display = 'block';
		mark.style.top = y - mark.offsetWidth / 2 + 'px';
		mark.style.left = x - mark.offsetHeight / 2 + 'px';
		showBox.style.display = 'block';
		showImg.style.marginLeft = - x + 'px';
		showImg.style.marginTop = - y + 'px';

	} else {
		mark.style.display = 'none';
		showBox.style.display = 'none';
	}
}


</script>
</html>